<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <title>错误信息生成器</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <style>
      body {
        font-family: Arial, sans-serif;
        background-color: #f4f4f9;
        color: #333;
        line-height: 1.6;
      }
      .container {
        max-width: 800px;
        margin: 50px auto;
        padding: 20px;
        background-color: #fff;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        border-radius: 8px;
        display: flex;
        gap: 20px;
        flex-wrap: wrap;
      }
      .input-section,
      .output-section {
        flex: 1;
        min-width: 300px;
      }
      h1 {
        text-align: center;
        color: #00aafb;
      }
      textarea,
      input {
        width: 100%;
        padding: 10px;
        margin-bottom: 10px;
        border: 1px solid #ddd;
        border-radius: 4px;
        box-sizing: border-box;
      }
      textarea {
        height: 100px;
        resize: vertical;
      }
      button {
        width: 100%;
        padding: 10px;
        background-color: #00aafb;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-size: 16px;
      }
      button:hover {
        background-color: #008bb5;
      }
      pre {
        background-color: #f8f8f8;
        padding: 10px;
        border-radius: 4px;
        border: 1px solid #ddd;
        white-space: pre-wrap;
        word-wrap: break-word;
        overflow-x: auto;
      }
      .loading {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(255, 255, 255, 0.8);
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 24px;
        color: #00aafb;
        z-index: 1000;
      }
    </style>
  </head>
  <body>
    <div
      id="loading"
      class="loading"
    >
      加载中...
    </div>
    <div
      id="app"
      class="container"
    >
      <div class="input-section">
        <h1>错误信息生成器</h1>
        <input
          v-model="apiAddress"
          placeholder="API 地址"
        />
        <input
          v-model="requestMethod"
          placeholder="请求方式"
        />
        <textarea
          v-model="requestHeaders"
          placeholder="请求参数 (headers)"
        ></textarea>
        <textarea
          v-model="requestBody"
          placeholder="入参"
        ></textarea>
        <textarea
          v-model="errorMessage"
          placeholder="异常信息"
        ></textarea>
        <button @click="copyToClipboard">复制到剪贴板</button>
      </div>
      <div class="output-section">
        <h1>输出结果</h1>
        <pre>{{ formattedOutput }}</pre>
      </div>
    </div>

    <script>
      new Vue({
        el: '#app',
        data: {
          apiAddress: '',
          requestMethod: '',
          requestHeaders: '',
          requestBody: '',
          errorMessage: ''
        },
        computed: {
          formattedOutput() {
            let output = `${this.apiAddress}\n${this.requestMethod}`;
            if (this.requestHeaders.trim()) {
              output += `\n================\n${this.requestHeaders}`;
            }
            output += `\n================\n${this.requestBody}\n================\n${this.errorMessage}`;
            return output;
          }
        },
        methods: {
          copyToClipboard() {
            navigator.clipboard.writeText(this.formattedOutput).then(
              () => {
                alert('复制成功!');
              },
              () => {
                alert('复制失败，请手动复制。');
              }
            );
          }
        },
        mounted() {
          const loadingElement = document.getElementById('loading');
          if (loadingElement) {
            loadingElement.style.display = 'none';
          }
        }
      });
    </script>
  </body>
</html>
